{% extends 'base.html' %}

{% block title %}Forgot Password — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
    nav, footer { display: none !important; }
    body { background: #f0f4f8; }

    .auth-wrapper { min-height: 100vh; display: flex; }

    .brand-panel {
        background: linear-gradient(145deg, #1a3c6e 0%, #2563eb 60%, #3b82f6 100%);
        color: #fff;
        width: 42%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 3.5rem;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }
    .brand-panel::before {
        content: ''; position: absolute;
        width: 320px; height: 320px; border-radius: 50%;
        background: rgba(255,255,255,.06); top: -80px; right: -80px;
    }
    .brand-panel::after {
        content: ''; position: absolute;
        width: 240px; height: 240px; border-radius: 50%;
        background: rgba(255,255,255,.05); bottom: -60px; left: -60px;
    }
    .brand-panel .brand-logo-img { height: 52px; width: auto; max-width: 240px; display: block; margin-bottom: 1.25rem; }
    .brand-panel h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.5px; margin-bottom: .4rem; }
    .brand-panel .tagline { font-size: .95rem; opacity: .8; margin-bottom: 2.5rem; line-height: 1.6; }
    .feature-item {
        display: flex; align-items: center; gap: .75rem;
        margin-bottom: 1rem; font-size: .9rem; opacity: .9;
    }
    .feature-item .fi-icon {
        width: 32px; height: 32px;
        background: rgba(255,255,255,.15); border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; font-size: 1rem;
    }

    .form-panel {
        flex: 1; display: flex; align-items: center;
        justify-content: center; padding: 2.5rem 2rem;
    }
    .form-box { width: 100%; max-width: 420px; }
    .form-box .form-control {
        padding: .65rem 1rem; border-radius: 10px;
        border: 1.5px solid #e2e8f0; font-size: .95rem;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-box .form-control:focus {
        border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    .form-box .form-control.is-invalid { border-color: #ef4444; }
    .btn-action {
        background: linear-gradient(135deg, #1d4ed8, #2563eb);
        border: none; border-radius: 10px; padding: .75rem;
        font-size: 1rem; font-weight: 600; letter-spacing: .3px;
        transition: opacity .2s, transform .1s;
    }
    .btn-action:hover { opacity: .92; transform: translateY(-1px); }
    .field-label { font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .35rem; display: block; }

    /* Success card */
    .success-icon-wrap {
        width: 72px; height: 72px; border-radius: 50%;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.25rem; font-size: 2rem; color: #fff;
    }

    @media (max-width: 767px) { .brand-panel { display: none; } }
</style>
{% endblock %}

{% block content %}
<div class="auth-wrapper">

    <!-- ── Left brand panel ─────────────────────────────── -->
    <div class="brand-panel">
        <a href="{% url 'home' %}" class="text-decoration-none d-inline-block mb-3">
        {% if site_settings.logo_light_url %}
        <img src="{{ site_settings.logo_light_url }}" alt="{{ site_settings.institute_name }}" class="brand-logo-img" style="margin-bottom:0;">
        {% else %}
        <div style="font-size:1.5rem;font-weight:700;color:#fff;">{{ site_settings.institute_name }}</div>
        {% endif %}
        </a>
        <p class="tagline">Recover your account securely<br>and get back to learning.</p>

        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-shield-lock"></i></div>
            <span>Secure identity verification</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-envelope-check"></i></div>
            <span>Reset link sent to your email</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-key"></i></div>
            <span>Choose a strong new password</span>
        </div>
        <div class="feature-item">
            <div class="fi-icon"><i class="bi bi-arrow-repeat"></i></div>
            <span>Regain access in minutes</span>
        </div>

        <p class="mt-4 mb-0" style="font-size:.78rem;opacity:.55;">
            &copy; {% now "Y" %} {{ site_settings.institute_name }}. Design &amp; Developed by <a href="https://nextdot.pk" target="_blank" rel="noopener noreferrer">NEXT DOT CONSULTANT</a>
        </p>
    </div>

    <!-- ── Right form panel ─────────────────────────────── -->
    <div class="form-panel">
        <div class="form-box">

            {% if email_sent %}
            <!-- ── Success state ── -->
            <div class="text-center">
                <a href="{% url 'home' %}" class="text-decoration-none d-inline-block">
                {% if site_settings.logo_dark_url %}
                <img src="{{ site_settings.logo_dark_url }}" alt="{{ site_settings.institute_name }}"
                     style="max-height:56px;max-width:220px;object-fit:contain;margin-bottom:1rem;">
                {% endif %}
                </a>
                <div class="success-icon-wrap">
                    <i class="bi bi-envelope-check-fill"></i>
                </div>
                <h2 class="fw-bold mb-2" style="color:#0f172a;">Check Your Inbox</h2>
                <p class="text-muted mb-1" style="font-size:.9rem;">
                    We sent a password reset link to
                </p>
                <p class="fw-semibold mb-3" style="color:#0f172a;">{{ masked_email }}</p>
                <p class="text-muted small mb-4">
                    The link expires in 3 days. If you don't see the email, check your spam folder.
                </p>
                <a href="{% url 'accounts:forgot_password' %}" class="btn btn-outline-primary w-100 rounded-3 mb-2 fw-medium">
                    <i class="bi bi-arrow-repeat me-2"></i>Try Again
                </a>
                <a href="{% url 'accounts:login' %}" class="btn btn-action btn-primary w-100 text-white fw-medium">
                    <i class="bi bi-box-arrow-in-right me-2"></i>Back to Sign In
                </a>
                <p class="text-center text-muted small mt-3 mb-0">
                    <a href="{% url 'home' %}" class="text-secondary text-decoration-none">
                        <i class="bi bi-house me-1"></i>Return to Landing Page
                    </a>
                </p>
            </div>

            {% else %}
            <!-- ── Request form ── -->
            <div class="mb-4 text-center">
                <a href="{% url 'home' %}" class="text-decoration-none d-inline-block">
                {% if site_settings.logo_dark_url %}
                <img src="{{ site_settings.logo_dark_url }}" alt="{{ site_settings.institute_name }}"
                     style="max-height:56px;max-width:220px;object-fit:contain;margin-bottom:1rem;">
                {% endif %}
                </a>
                <h2 class="fw-bold mb-1" style="color:#0f172a;">Forgot your password?</h2>
                <p class="text-muted" style="font-size:.9rem;">Enter your email and CNIC to receive a reset link.</p>
            </div>

            {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3 py-2 small" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
            {% endif %}

            {% if form.non_field_errors %}
            <div class="alert alert-danger rounded-3 py-2 small mb-3">
                <i class="bi bi-exclamation-triangle me-1"></i>{{ form.non_field_errors.0 }}
            </div>
            {% endif %}

            <form method="post" novalidate>
                {% csrf_token %}

                <div class="mb-3">
                    <label class="field-label" for="{{ form.email.id_for_label }}">
                        <i class="bi bi-envelope me-1"></i>Email Address <span class="text-danger">*</span>
                    </label>
                    {{ form.email }}
                    {% if form.email.errors %}
                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ form.email.errors.0 }}</div>
                    {% endif %}
                </div>

                <div class="mb-4">
                    <label class="field-label" for="{{ form.cnic.id_for_label }}">
                        <i class="bi bi-credit-card me-1"></i>CNIC <span class="text-danger">*</span>
                    </label>
                    {{ form.cnic }}
                    {% if form.cnic.errors %}
                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-circle me-1"></i>{{ form.cnic.errors.0 }}</div>
                    {% endif %}
                    <div class="form-text text-muted" style="font-size:.78rem;">Enter your 13-digit CNIC (dashes optional).</div>
                </div>

                <button type="submit" class="btn btn-action btn-primary w-100 text-white mb-3">
                    <i class="bi bi-send me-2"></i>Send Reset Link
                </button>
            </form>

            <p class="text-center text-muted small mb-1">
                Remembered your password?
                <a href="{% url 'accounts:login' %}" class="text-primary text-decoration-none fw-semibold">Sign In</a>
            </p>
            <p class="text-center text-muted small mb-0">
                <a href="{% url 'home' %}" class="text-secondary text-decoration-none">
                    <i class="bi bi-house me-1"></i>Return to Landing Page
                </a>
            </p>
            {% endif %}

        </div>
    </div>

</div>
{% endblock %}